<template>
  <div>
    <el-container>
      <el-aside width="400px">
        <el-table size="small" :data="paramList">
          <el-table-column width="130" prop="name" label="参数">
            <template #default="{ row }">{{ '{' + row.name + '}' }}</template>
          </el-table-column>
          <el-table-column prop="des" label="描述">
            <template #default="{ row }">{{ row.des }}</template>
          </el-table-column>
          <el-table-column prop="input" label="模拟" width="170">
            <template #default="{ row }">
              <el-input maxlength="20" v-model.trim="row.value"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-alert type="info" :closable="false">
          <template #title>
            参数用法:上列显示数据代表可使用的动态参数,假如{_title}为<code>北京大学</code>,那么设置SEO规则:<code>欢迎来到{_title}参观</code>,最后解析出来的SEO规则就是:<code>欢迎来到北京大学参观</code>
          </template>
        </el-alert>
      </el-aside>
      <el-main>
        <el-form :model="form" :rules="rules" label-position="top">
          <el-form-item label="SEO标题" prop="title">
            <el-input maxlength="40" show-word-limit v-model.trim="form.title"/>
            <p class="app-form-create-hint">不设置则使用默认SEO标题</p>
          </el-form-item>
          <el-form-item label="SEO关键词" prop="keywords">
            <el-input maxlength="80" show-word-limit v-model.trim="form.keywords" type="textarea"/>
            <p class="app-form-create-hint">不设置则使用默认SEO关键词</p>
          </el-form-item>
          <el-form-item label="SEO描述" prop="description">
            <el-input maxlength="150" show-word-limit v-model.trim="form.description" type="textarea"/>
            <p class="app-form-create-hint">不设置则使用默认SEO描述</p>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" long @click="updatedSeoRules">保存规则</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <div v-if="isDebug">
      <el-card title="SEO调试器" shadow="never">
        <template #header>
          <div class="card-header">
            <span>SEO调试器</span>
          </div>
        </template>
        <template #default>
          <div v-if="form.title">
            <el-link type="warning">标&nbsp;&nbsp;&nbsp;&nbsp;题</el-link>
            <p class="debgu-info" v-html="debugSeo.title"></p>
          </div>
          <div v-if="form.keywords">
            <el-link type="warning">关键词</el-link>
            <p class="debgu-info" v-html="debugSeo.keywords"></p>
          </div>
          <div v-if="form.description">
            <el-link type="warning">描&nbsp;&nbsp;&nbsp;&nbsp;述</el-link>
            <p class="debgu-info" v-html="debugSeo.description"></p>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, Ref, ref, UnwrapRef, computed, PropType, onBeforeMount} from "vue"
import {updatedSeoRulesApi} from "@/apps/admin/api/system/seo";
import {useCloseMessageBox} from "@/hooks/DialogMsg";
import {ElMessage} from "element-plus";

export default defineComponent({
  name: "UpdatedRules",
  emits: {
    success: () => true
  },
  props: {
    seo: {
      type: Object as PropType<{ [key: string]: any }>,
      required: true
    }
  },
  setup(props, {emit}) {
    /**
     * 表单数据
     */
    const form = ref({
      id: props.seo.id,
      title: props.seo.title,
      keywords: props.seo.keywords,
      description: props.seo.description
    })

    /**
     * 动态参数
     */
    const paramList: Ref<UnwrapRef<Array<any>>> = ref([])

    /**
     * 表单验证规则
     */
    const rules: any = {
      title: [
        {max: 40, message: '网站标题不能超过40个字', trigger: 'blur'},
      ],
      keywords: [
        {max: 80, message: '网站关键词不能超过80个字', trigger: 'blur'},
      ],
      description: [
        {max: 150, message: '网站描述不能超过150个字', trigger: 'blur'},
      ]
    }


    const isDebug = computed(() => {
      if (!(form.value.title || form.value.keywords || form.value.description)) {
        return false;
      }
      for (let item of paramList.value) {
        if (item.value) {
          return true
        }
      }
      return false
    })


    const debugSeo = computed(() => {
      let seo = {
        title: form.value.title,
        keywords: form.value.keywords,
        description: form.value.description,
      }
      for (let item of paramList.value) {
        let reg = new RegExp(`{${item.name}}`, 'g');
        let val = typeof item.value === 'string' ? `<b style="color:#ff0000;">${item.value}</b>` : ''
        seo.title = seo.title.replace(reg, val);
        seo.keywords = seo.keywords.replace(reg, val);
        seo.description = seo.description.replace(reg, val);
      }
      return seo;
    })


    /**
     * 关闭弹窗
     */
    const close = useCloseMessageBox()


    /**
     * 设置参数列表
     */
    function setParamList() {
      let param: any[] = [
        {name: '_title', des: '全局标题', value: ''},
        {name: '_keywords', des: '全局关键词', value: ''},
        {name: '_description', des: '全局描述', value: ''},
      ];
      const seo = {...props.seo}
      if (seo.param instanceof Array && seo.param.length === 0) {
        paramList.value = param
      } else if (seo.param instanceof Object) {
        for (let key in seo.param) {
          param.push({name: key, des: seo.param[key]})
        }
        paramList.value = param
      }
    }

    function updatedSeoRules() {
      updatedSeoRulesApi({...form.value}).then(result => {
        if (result.code === 200) {
          emit('success')
          ElMessage.success(result.msg)
          close()
        }
      })
    }

    onBeforeMount(setParamList)
    return {
      form, rules, paramList, updatedSeoRules, isDebug, debugSeo
    }
  }
})
</script>